<template>
    <div>
        <!-- 顶部返回 -->
        <div class="rangkingList-box">
            <div class="rangkingList-header">
                <span class="iconfont icon-arrow-left-bold icon" @click="$router.go(-1)"></span>
                <span class="words">排行榜</span>
            </div>
            <!-- 中间图片 -->
            <div class="img-box">
                <div class="img"><img :src="lists.coverImgUrl" alt=""></div>
                <div class="name">{{lists.name}}</div>
            </div>
            <!-- 歌曲列表 -->
            <div class="songList">
                <div class="songList-title" @click="playAll">
                    <span class="iconfont icon-zanting icon"></span>
                    <span>播放全部</span>
                    <span class="num">(共{{num}}首)</span>
                </div>
                <div class="song-name-box">
                    <ul>
                        <li class="item" v-for="(item,index) in lists.tracks" :key="index" @click="setId(item.id)">
                            <div class="index">{{index+1}}</div>
                            <div class="song-name">
                                <div>{{item.name}}</div>
                                <div>
                                    <span v-for="(k,i) in item.ar" :key="i">{{k.name}}&nbsp;</span>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import {getPlaylistDetail} from "../../api/ranking";
    export default {
        data() {
            return {
                lists:[],
                num:null,
            }
        },
        methods: {
            setId(id){
                this.$emit('get-player-id',id)
            },
            playAll(){
                // 播放全部歌曲
                this.$emit("get-play-all-id",this.$route.query.id); //传递歌单id
                this.$emit("get-player-id",this.lists.tracks[0].id); //播放歌曲id。播放第一首
            }
        },
        created() {
            getPlaylistDetail({id:this.$route.query.id}).then(data=>{
                this.lists = data.playlist;
                this.num = this.lists.tracks.length;
            })
        },
    }
</script>

<style lang="less">
.rangkingList-box{
    width: 100%;
    position: relative;
    .rangkingList-header{
        position: absolute;
        top: 0;
        left: 0;
        z-index: 100;
        width: 100%;
        height: 40px;
        line-height: 40px;
        color: white;
        .icon{
            margin: 0 12px;
            font-size: 15px;
        }
    }
    .img-box{
        width: 100%;
        height: 275px;
        position: relative;
        .img{
            height: 100%;
            // display: flex;
            // justify-content: center;
            // align-content: center;
            position: relative;
            img{
                position: absolute;
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;
                margin: auto;
                display: block;
                width: 100%;
            }
        }
        .name{
            position: absolute;
            left: 18px;
            bottom: 30px;
            color: white;
            font-size: 15px;
            font-weight:bold;
            white-space: 0.5px
        }
    }
    .songList{
        width: 100%;
        border-radius: 5px 5px 0 0;
        position: absolute;
        top: 270px;
        left: 0;
        z-index:100;
        background-color: white;
        .songList-title{
            width: 100%;
            height: 38px;
            line-height: 38px;
            font-size: 16px;
            border-bottom: 1px solid #e5e5e5;
            color: #0b0e0d;
            .icon{
                margin: 0 14px;
            }
            .num{
                font-size: 15px;
                color: #808181;
            }
        }
        .song-name-box{
            width:100%;
            ul{
                width: 100%;
                .item{
                    width: 100%;
                    height: 52px;
                    border-bottom: 1px solid #e5e5e5;
                    display: flex;
                    .index{
                        width: 45px;
                        height: 52px;
                        text-align: center;
                        line-height: 52px;
                        color: #5b5b5b;
                        font-size: 15px;
                    }
                    .song-name{
                        height: 52px;
                       width: 300px;
                        div{
                            width: 100%;
                            font-size: 16px;
                            white-space: nowrap;
                            overflow: hidden;
                            text-overflow: ellipsis;
                        }
                        div:nth-child(1){
                            margin-top: 8px;
                        }
                        div:nth-child(2){
                            font-size: 12px;
                            color:#808181;
                        }
                    }
                }
            }
        }
    }
}
</style>